<template>
  <div class="main_box">
    <CommonHeader title="计划举措"></CommonHeader>
    <van-form class="main_form" @submit="onSubmit">
      <div class="form_title">计划举措内容</div>
      <van-field
        v-model="form.content"
        required
        input-align="left"
        name="title"
        placeholder="请输入计划举措内容"
        maxlength="150"
        type="textarea"
        show-word-limit
        rows="6"
        :rules="[{ required: true, message: '' }]"
      >
      </van-field>
      <div class="enclosure_box">
        <van-uploader accept="file" :after-read="afterRead">
          <van-button icon="plus">添加附件</van-button>
        </van-uploader>
      </div>
      <div class="file_list">
        <div class="file_item" v-for="(item, index) in fileList" :key="index">
          <i class="file_icon" :class="formateFileType(item.fileName)"></i>
          <div class="content">{{ item.fileName }}</div>
          <i class="delete_icon" @click="deleteFile(item, index)"></i>
        </div>
      </div>
      <div class="btn_box">
        <van-button round type="info" native-type="submit">提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import CommonHeader from "@/components/commonHeader";
export default {
  // eslint-disable-next-line
  name: "feedbackForm",
  components: {
    CommonHeader,
  },
  data() {
    return {
      form: {
        content: "",
      },
      fileList: [],
    };
  },
  methods: {
    afterRead(event) {
      const file = event.file;
      const form = new FormData();
      form.append(`file`, file);
      this.$api.uploadFile(form).then((res) => {
        this.fileList.push(res);
      });
    },
    deleteFile(file, index) {
      this.fileList.splice(index, 1);
    },
    onSubmit() {
      const query = this.$route.query;
      const params = {
        _gp: "duties",
        _mt: "dutiesFeedback",
        employId: sessionStorage.getItem("employId"),
        dutiesId: query.id,
        feedbackContent: this.form.content,
        serverFileName: this.fileList[0].fileName || "",
        annexName: this.fileList[0].fileName || "",
        filePath: this.fileList[0].url || "",
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno === 200) {
          Toast.success("提交成功");
          setTimeout(() => {
            this.$router.go(-2);
          }, 1500);
        } else {
          Toast.fail(res.data);
        }
      });
    },
    formateFileType() {
      return function (fileName) {
        if (fileName) {
          const arr = fileName.split(".");
          const type = arr[arr.length - 1];
          if (type === "docx" || type === "doc") {
            return "word";
          } else if (type === "xlsx" || type === "xls") {
            return "word";
          } else if (type === "pdf") {
            return "pdf";
          } else {
            return "";
          }
        } else {
          return "";
        }
      };
    },
  },
};
</script>

<style scoped>
.main_box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f4f5fa;
}
.main_form {
  font-size: 14px;
  color: #333;
  padding: 15px;
}
.form_title {
  width: 100%;
  text-align: left;
  padding: 10px 0;
}
.enclosure_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}
.enclosure_box >>> .van-uploader,
.enclosure_box >>> .van-uploader__input-wrapper,
.enclosure_box >>> .van-button {
  width: 100%;
}
.enclosure_box >>> .van-button {
  color: #2a81e6;
  font-size: 14px;
}
.file_list .file_item {
  display: flex;
  font-size: 14px;
  color: #2a81e6;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
}
.file_list .file_item .content {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_list .file_item .file_icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url("../../assets/image/file.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.file_list .file_item .file_icon.pdf {
  background: url("../../assets/image/Pdf.png") no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.word {
  background: url("../../assets/image/word.png") no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.excel {
  background: url("../../assets/image/excel.png") no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .delete_icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../../assets/image/delete.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  position: relative;
  top: 3px;
}
.btn_box >>> .van-button {
  width: 90%;
  margin-top: 20px;
}
</style>